<template>
  <div>
    <el-tree
      ref="tree"
      :data="data"
      default-expand-all
      highlight-current
      node-key="id"
      :props="defaultProps"
      show-checkbox
    ></el-tree>
    <div class="buttons">
      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
      <el-button @click="resetChecked">清空</el-button>
      <el-button @click="addTreeNode">追加</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Test',

  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },

  methods: {
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes())
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5
        },
        {
          id: 9
        }
      ])
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3])
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([])
    },
    addTreeNode() {
      this.data = [
        {
          id: 2,
          label: '一级 2'
        }
      ]
    }
  }
}
</script>
